@import '../styles/variables';
@import '../styles/mixins/breakpoints';
@import '../styles/mixins/grid';

$navbar-background: var(--color-black);
$navbar-color: #fff;
$navbar-color-hover: #fff;
$navbar-breakpoint: lg;

.navigation {
  padding: 0 1rem;

  li, a, a:link, a:visited, a:active, .link {
    color: $navbar-color;
  }

  a:hover, .link:hover  {
    color: $navbar-color-hover;
    text-decoration: underline;
  }

  &__title {
    font-size: 18px;
    font-weight: bold;
    margin: 1rem 0 1rem;

    a {
      color: $navbar-color-hover !important;
    }
  }

  &__group {
    font-size: 14px;
    font-weight: bold;
  }

  &__content-nested {
    margin-bottom: 1rem;
  }

  &__link {
    display: block;
    padding: 0.1rem 0.3rem;
    font-size: 14px;
    font-weight: normal;
    margin: 0;

    &:before {
      display: inline-block;
      content: '»';
      position: relative;
      top: -2px;
      padding: 0 4px 0 0;
    }
  }
}
